<template>
  <el-card class="box-card231">
    <template #header>
      <div class="card-header">
        <el-icon color="#7651DD">
          <Document />
        </el-icon>
        &nbsp;
        <span style="color: #7651dd">统一规定</span>
      </div>
    </template>
    <el-table height="150px" :header-cell-style="{ background: '#fafbfc', color: '#333333' }" size="small"
      :data="tableData">
      <el-table-column label="序号" type="index" align="left" />
      <el-table-column show-overflow-tooltip label="文档名称" prop="file_name" align="left">
        <template #default="scope">
          <span @click="gotoD(scope.row)" class="hober">{{
            scope.row.file_name
          }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip width="100" label="日期" prop="create_time" align="left" />
    </el-table>
  </el-card>
</template>

<script setup>
  import File from "../../../utils/checkFile";
  import { Document } from "@element-plus/icons-vue";
  import { onMounted, ref, watch } from "vue";
  import { getRuleTable } from "../../../api/project";
  import { DownloadDepartmentFile } from "../../../api/projectManage/projectList";
  let props = defineProps(["proj_oid"]);

  let tableData = ref([]);

  let getTableData = async (data) => {
    let res = await getRuleTable(data);
    tableData.value = res;
  };
  onMounted(() => {
    // getTableData({proj_oid:props.proj_oid})
  });

  watch(
    () => props.proj_oid,
    () => {
      getTableData({ proj_oid: props.proj_oid, file_type: "项目统一规定" });
    },
    { immediate: true }
  );

  let gotoD = async (row) => {
    File("", row);

  };
</script>

<style scoped lang="scss">
  .hober {
    cursor: pointer;
  }

  .hober:hover {
    color: rgb(34, 171, 249);
    text-decoration: underline;
  }

  .card-header {
    display: flex;
    align-items: center;
    font-size: 17px;

    span {
      // background-color: aqua;

      border-radius: 4px;

      font-weight: 600;
    }
  }

  .project-info {
    display: flex;
    font-size: 14px;

    flex-direction: column;

    .project-info-item {
      margin-bottom: 10px;
    }
  }

  .box-card231 {
    width: 19%;

    ::v-deep(.el-card__body) {
      padding: 5px;
    }
  }
</style>
